<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据图表</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .chart-controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .data-selector {
            display: flex;
            gap: 10px;
        }
        .btn {
            padding: 8px 16px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #40a9ff;
        }
        .btn.active {
            background-color: #096dd9;
        }
        #chart-container {
            width: 100%;
            height: 500px;
        }
        .loading {
            text-align: center;
            padding: 40px;
            font-size: 18px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>数据统计图表</h1>
        <div class="chart-controls">
            <div class="data-selector">
                <button id="weekly-btn" class="btn active">一周数据</button>
                <button id="monthly-btn" class="btn">本月数据</button>
            </div>
        </div>
        <div id="chart-container">
            <div class="loading">正在加载数据...</div>
        </div>
    </div>

    <script>
        // 初始化 ECharts 实例
        const chartDom = document.getElementById('chart-container');
        const myChart = echarts.init(chartDom);
        
        // 显示加载动画
        myChart.showLoading();
        
        // 获取按钮元素
        const weeklyBtn = document.getElementById('weekly-btn');
        const monthlyBtn = document.getElementById('monthly-btn');
        
        // 当前数据类型
        let currentDataType = 'weekly';
        
        // 基础图表配置
        let baseOption = {
            title: {
                text: '一周数据趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: '{b}: {c}'
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    rotate: 45,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                name: '数量'
            },
            series: [
                {
                    name: '数量',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    smooth: true,
                    lineStyle: {
                        width: 3
                    },
                    itemStyle: {
                        color: '#1890ff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(24, 144, 255, 0.5)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(24, 144, 255, 0.1)'
                            }
                        ])
                    }
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    type: 'slider',
                    start: 0,
                    end: 100
                }
            ]
        };
        
        // 加载数据函数
        function loadData(dataType) {
            // 更新按钮状态
            if (dataType === 'weekly') {
                weeklyBtn.classList.add('active');
                monthlyBtn.classList.remove('active');
                baseOption.title.text = '一周数据趋势';
            } else {
                monthlyBtn.classList.add('active');
                weeklyBtn.classList.remove('active');
                baseOption.title.text = '本月数据趋势';
            }
            
            // 显示加载动画
            myChart.showLoading();
            
            // 获取数据
            fetch(`/api/ChartData/${dataType}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    // 隐藏加载动画
                    myChart.hideLoading();
                    
                    // 处理数据
                    const dates = data.map(item => item.date);
                    const values = data.map(item => item.value);
                    
                    // 更新图表数据
                    baseOption.xAxis.data = dates;
                    baseOption.series[0].data = values;
                    
                    // 设置图表选项并渲染
                    myChart.setOption(baseOption);
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    myChart.hideLoading();
                    chartDom.innerHTML = `<div class="loading" style="color: red;">获取数据失败: ${error.message}</div>`;
                });
        }
        

        
        // 事件监听
        weeklyBtn.addEventListener('click', () => {
            if (currentDataType !== 'weekly') {
                currentDataType = 'weekly';
                loadData('weekly');
            }
        });
        
        monthlyBtn.addEventListener('click', () => {
            if (currentDataType !== 'monthly') {
                currentDataType = 'monthly';
                loadData('monthly');
            }
        });
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
        
        // 初始加载一周数据
        loadData('weekly');
    </script>
</body>
</html>